<template>
	<view class="container">
		<!--检索-->
		<view class="search flex-row" :class="{input: query.keywords}">
			<!-- <uni-icons class="icon" type="search" size="16" color="#777"></uni-icons> -->
			<u--input @confirm="search" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
				@input="listenInput" class="input" type="text" v-model="query.keywords" placeholder="请输入关键词"
				shape="circle" clearable></u--input>
			<view class="btn flex-column" @click="search">搜索</view>
		</view>
		<!--列表-->
		<scroll-view v-show="!query.keywords" class="body" scroll-y>
			<view class="card">
				<view class="title flex-row">
					<text class="text">历史搜索</text>
					<uni-icons type="trash" size="16" @click="clearHistory"></uni-icons>
				</view>
				<view style="color: #777;font-size: 24rpx;text-align: center;"
					v-if="historyArr==[] || historyArr.length == 0">暂无搜索记录</view>
				<view class="history flex-flow" v-else>
					<view v-for="(item, index) in historyArr" :key="index" class="item flex-column text-ellipsis"
						@click="fillInput(item)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="title flex-row">
					<text class="text">热门文章</text>
				</view>
				<view class="list">
					<view v-for="(item, index) in hotList" :key="item.id" class="item flex-row text-ellipsis"
						@click="toDetail(item.id)">
						<view class="name text-ellipsis">{{item.title}}</view>
						<view class="views">{{item.viewCount}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view v-show="query.keywords" class="body" scroll-y>
			<card v-for="(item, index) in queryList" :key="item.id" :item="item"></card>
		</scroll-view>
	</view>
</template>

<script>
	import {
		hotArticleList,
		updateViewCount,
		search
	} from '../../api/article'
	export default {
		data() {
			return {
				hotList: [],
				query: {
					keywords: ''
				},
				queryList: null,
				historyArr: []
			}
		},
		onShow() {
			this.getHotList()
			this.historyArr = uni.getStorageSync("searchHistory") || []
		},
		methods: {
			fillInput(keywords) {
				this.query.keywords = keywords
				this.search()
			},
			clearHistory() {
				uni.removeStorageSync('searchHistory');
				this.historyArr = uni.getStorageSync("searchHistory") || []
			},
			saveSeachHistory(keywords) {
				let searchHistory = uni.getStorageSync("searchHistory") || []

				// 去重

				let index = searchHistory.findIndex(i => {
					return i == keywords
				})

				if (index >= 0) {
					searchHistory.splice(index, 1)
				}
				// unshift：数组向前追加
				searchHistory.unshift(keywords)
				searchHistory = searchHistory.slice(0, 8)
				uni.setStorageSync("searchHistory", searchHistory)
				this.historyArr = uni.getStorageSync("searchHistory")
			},
			reset() {
				this.query.keywords = ''
			},
			search() {
				const keywords = this.query.keywords
				search(keywords).then(res => {
					this.queryList = res
				})
				this.saveSeachHistory(keywords)
			},
			toDetail(id) {
				updateViewCount(id)
				uni.navigateTo({
					url: `/pages/article/detail?id=${id}`
				})
			},
			listenInput(e) {
				if (this.query.keywords == '' || this.query.keywords == null) {
					this.queryList = []
				}
				this.query.keywords = e.detail.value
				// this.search(this.query.keywords)
				// console.log(this.query.keywords);
			},
			getHotList() {
				hotArticleList().then(res => {
					this.hotList = res
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	/*列表*/
	.body {
		background-color: #FFF;
		height: calc(100vh - 100rpx);
	}

	/* #ifdef H5 */
	.container {
		height: calc(100vh - 44px - 50px - var(--status-bar-height));
		min-height: initial;
	}

	.body {
		height: calc(100vh - 100rpx - 44px - 50px - var(--status-bar-height));
	}

	/* #endif */

	.card {
		padding: 30rpx 30rpx 0;

		.title {
			margin-bottom: 30rpx;

			.text {
				font-size: 32rpx;
			}
		}

		/*列表*/
		.list {
			.item {
				margin-bottom: 20rpx;

				&:nth-child(1) {

					.name,
					.views {
						color: red;
					}
				}

				&:nth-child(2) {

					.name,
					.views {
						color: $main-color;
					}
				}

				&:nth-child(3) {

					.name,
					.views {
						color: green;
					}
				}

				.name {
					width: calc(100% - 200rpx);
				}

				.views {
					color: #777;
				}
			}
		}

		/*历史搜索*/
		.history {
			.item {
				color: #777;
				height: 60rpx;
				width: calc(25% - 20rpx);
				border-radius: 40rpx;
				margin: 0 10rpx 30rpx;
				background-color: #F5F5F5;
			}
		}
	}

	/*检索区域*/
	.search {
		height: 100rpx;
		padding: 0 30rpx;
		position: relative;

		.icon {
			position: absolute;
			top: 30rpx;
			left: 60rpx;
		}

		.icon-right {
			position: absolute;
			top: 30rpx;
			right: 60rpx;
		}

		.input {
			width: 100%;
			height: 72rpx;
			font-size: 28rpx;
			border-radius: 60rpx;
			background-color: #FFF;
			padding: 0 30rpx 0 80rpx;
			transition: width 0.2s ease;
		}

		.btn {
			color: #FFF;
			width: 0;
			opacity: 0;
			height: 72rpx;
			border-radius: 40rpx;
			background-color: $main-color;
			transition: all 0.2s ease;
		}

		&.input {
			.input {
				width: calc(100% - 140rpx);
			}

			.btn {
				opacity: 1;
				width: 120rpx;
			}
		}
	}
</style>